<!--
 * @Author: 鱿鱼溪学院
 * @Date: 2025-05-02 21:25:49
 * @LastEditTime: 2025-05-09 01:38:54
 * @LastEditors: 鱿鱼溪学院
 * @Description: 
 * @FilePath: \yyx-web\src\components\common\CountDown.vue
 * Copyright 鱿鱼溪学院 by edu v1.0
 * 天道酬勤
-->
<template>
  <!-- 输入框用于获取用户手机号 -->
  <!-- <input type="text" v-model="phoneNumber" placeholder="请输入手机号"> -->
  <!-- 按钮用于触发验证码发送，当倒计时进行中时禁用 -->
  <button type="button" @click="handleSendCode" :disabled="isCountingDown">
    {{ buttonText }}
    {{ phone }}
  </button>
</template>

<script setup lang="ts">
import { sendSms } from '@/api/sms'
import { ref, defineExpose } from 'vue'

// 用户输入的手机号
const phoneNumber = ref('')
// 标记是否正在倒计时，用于禁用按钮
const isCountingDown = ref(false)
// 倒计时的秒数
const countdownSeconds = ref(60)
// 按钮上显示的文本
const buttonText = ref('获取验证码')

let props = defineProps({
  phone: {
    type: String,
    default: ''
  }
})

/**
 * 获取验证码函数
 * 当用户未输入手机号时弹出提示
 * 否则模拟发送验证码并开始倒计时
 */
// const getVerificationCode = async () => {
//   if (!props.phone) {
//     alert('请输入手机号')
//     return
//   }

//   // const res = await sendSms({
//   //   phoneNumbers: props.phone
//   // })

//   console.log(props.phone)

//   // 模拟发送验证码请求
//   console.log(`发送验证码到: ${phoneNumber.value}`)

//   startCountdown()
// }

const emit = defineEmits(['send-success', 'send-error'])

/**
 * 向父组件暴露一个方法，供父组件调用以触发验证码发送
 * 父组件应在调用前完成表单校验
 */
const handleSendCode = async () => {
  try {
    console.log('开始发送验证码到:', props.phone)

    // 模拟发送验证码请求
    // const res = await sendSms({ phoneNumbers: props.phone })
    emit('send-success')
    // 假设请求成功
    // startCountdown()
  } catch (error) {
    console.error('发送验证码失败:', error)
    emit('send-error', error)
  }
}

const startCountdown = () => {
  console.log('开始倒计时')
  let seconds = countdownSeconds.value

  isCountingDown.value = true

  const interval = setInterval(() => {
    seconds--
    buttonText.value = `${seconds}秒后重新获取`

    // 当倒计时结束，清理interval并重置状态
    if (seconds <= 0) {
      clearInterval(interval)
      isCountingDown.value = false
      buttonText.value = '获取验证码'
    }
  }, 1000)
}

defineExpose({ handleSendCode, startCountdown })

// 将方法暴露给父组件
//defineExpose({ handleSendCode, startCountdown })
</script>

<style scoped>
/* 添加一些基本样式 */
input {
  padding: 8px;
  margin-right: 10px;
}

button {
  padding: 8px 16px;
  background-color: white;
  color: #007bff;
  border: none;
  cursor: pointer;
}

/* 当按钮禁用时的样式 */
button:disabled {
  color: #cfc7c7;
  background-color: white;
  cursor: not-allowed;
}
</style>
